
<template>
  <div>
    <!-- <p v-for="item in categoryLists" :key="item.id">{{item.name}}</p> -->
    <!-- 顶部 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="formInline.user" placeholder="属性名称"></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="formInline.region" placeholder="清选择">
          <el-option
            :label="item.name"
            v-for="(item, index) in categoryLists"
            :key="index"
            :value="item.id"
          ></el-option>
          <!-- <el-option label="区域二" value="beijing"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch()">查询</el-button>
        <el-button type="primary" @click="onAdd">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容 -->
    <el-table :data="AttributeLists" border style="width: 100%">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="属性名称"> </el-table-column>
      <el-table-column label="商品属性" prop="name" > </el-table-column>
      <!-- <template v-for="(item, index) in categoryLists">
        <el-table-column label="商品属性" :key="index" :prop="item.name">
        </el-table-column>
      </template> -->

      <el-table-column label="操作" prop="id">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleeditattribute(`${scope.row.id}`)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.count"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Loading } from 'element-ui';
import {
  getAttributeLists,
  getUserByToken,
  getCategoryLists,
} from "../../request/httpApi";
export default {
  data() {
    return {
      categoryLists: [],
      sizeNum: "",
      pageNum: "",
      //分页
      currentPage1: 1,
      categoryLists: [],
      AttributeLists: [],
      data:{},

      formInline: {
        user: "",
        region: "",
      },
    };
  },
  methods: {
    handleeditattribute(val) {
      // console.log(val);
      this.$router.push("/editattribute/" + val);
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      //   console.log(val1);
      this.sizeNum = val;
      //   console.log(this.sizeNum);
      getAttributeLists({
        page: val1,
        size: this.pageNum,
      }).then((res) => {
        // console.log(res);
        if (res.errno == 0) {
          this.AttributeLists = res.data.data;
        }
      });
    },
    //切换页数
    handleCurrentChange(val) {
      //   console.log(val);
      this.pageNum = val;
      getAttributeLists({
        page: val,
        size: this.sizeNum,
      }).then((res) => {
        // console.log(res);
        if (res.errno == 0) {
          this.AttributeLists = res.data.data;
        }
      });
    },
    onSearch(val) {
        console.log(this.formInline.user);
        console.log(this.formInline.region);
        // console.log(val);
      //   console.log("submit!");
      getAttributeLists({
        page: 1,
        size: 10,
        name: this.formInline.user,
        c_id: this.formInline.region,
      }).then((res) => {
        // console.log(res);
        if (res.errno == 0) {
          this.AttributeLists = res.data.data;
        }
      });
    },
    onAdd() {
      this.$router.push('/addattribute')
    },
  },
  created() {
    //发送分类请求
    getCategoryLists().then((res) => {
    //   console.log(res);
      if (res.errno == 0) {
        this.categoryLists = res.data;
        console.log(this.categoryLists);
      }
    });
    //获取用户信息
    getUserByToken().then((res) => {
      // console.log(res);
    }),
      getAttributeLists({
        page: 1,
        size: 10,
      }).then((res) => {
        console.log(res);
        if (res.errno == 0) {
          this.data = res.data;
          this.AttributeLists = res.data.data;
        }
      });
    //发送分类请求
    getCategoryLists().then((res) => {
      console.log(res);
      if (res.errno == 0) {
        this.categoryLists = res.data;
      }
    });
  },
};
</script>

<style scoped lang="less">
.paging {
  padding-top: 10px;
  padding-bottom: 10px;
  float: right;
}
</style>